import React, { FC, useEffect, useState } from 'react'
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
  FaceRecognitionOutline,
  HeartOutline,
  HistogramOutline,
  FillinOutline,
  UnlockOutline,
  CheckShieldOutline,
  AppstoreOutline,
  ChatAddOutline
} from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { Avatar, Button, List, Dialog, Mask, Space, ProgressBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useInterval, useRequest } from 'ahooks'

import './Mine.scss'
import MineBg from '@/assets/images/mine.gif'
import MyHeader from '../../components/MyHeader'
import UploadFile from '../../components/UploadFile'
import { baseURL } from '../../api/request'
import { useComment } from '../../hooks/common'
import { getuserInfo } from '../../api/api'
import { changeUserInfo } from '../../rtk/reducers/info'
import { userInfoAction } from '../../hooks/userInfoAction'
import { ShowMsg } from '../../utils/message'


const Mine: FC = () => {
  const router = useNavigate()
  const dispatch = useDispatch()
  const { userInfo } = useSelector((state: any) => state.info)
  const { defaultAvatar, checkHashLogin } = useComment()
  const { todoLogout } = userInfoAction()
  const [cache, setCache] = useState<number>(Math.round(Math.random() * 100))
  const [visible, setVisible] = useState<boolean>(false)
  const [percent, setPercent] = useState<number>(0)
  const [interval, setInterval] = useState(1000)

  // 发请求 获取用户信息
  const getUserInfoData = useRequest(getuserInfo, {
    manual: true,
    onSuccess: (res: any) => {
      if (res.code == 200) {
        dispatch(changeUserInfo(res.result))
      }
    }
  })

  useEffect(() => {
    checkHashLogin(() => {
      getUserInfoData.run()
    })
  }, [])

  // 退出登录
  const logout = () => {
    Dialog.show({
      content: '确认退出登录',
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
          },
          {
            key: 'delete',
            text: '确认',
            bold: true,
            danger: true,
            onClick: () => {
              todoLogout()
            }
          },
        ],
      ],
    })
  }

  // 清除缓存
  const clsCache = () => {
    if (cache == 0) {
      ShowMsg('暂无缓存')
    } else {
      setVisible(true)
      setInterval(30)
    }
  }

  const clear = useInterval(() => {
    if (percent > 100) {
      clear()
      setVisible(false)
      setCache(0)
      setPercent(0)
      ShowMsg('缓存清理成功')
    } else {
      setPercent(percent + 1)
    }
  }, interval)

  useEffect(() => {
    clear()
  }, [])


  return (
    <div>
      <MyHeader title='个 人 中 心' noback={true}></MyHeader>
      <div className='mine-top'>
        <img src={MineBg} alt='' className='top-img' />
        {
          userInfo ?
            <div className='info'>
              <UploadFile>
                {
                  userInfo.avatar ?
                    <Avatar src={userInfo.avatar.replace(/public/, baseURL)} className='avatar'></Avatar>
                    :
                    <Avatar src={defaultAvatar} className='avatar'></Avatar>
                }
              </UploadFile>

              <h3 className="name"> 账号：{userInfo.username}</h3>
              <h3 className="phone"> 手机号：{userInfo.phone}</h3>

            </div>
            :
            <div className='info'>
              <Button color='success' className='tada1' onClick={() => router('/login')}>
                授权登录
              </Button>
            </div>
        }
      </div>

      <div className='mine-list'>
        <List header='操作列表'>
          {
            userInfo &&
            <div>
              <List.Item prefix={<FaceRecognitionOutline />} onClick={() => { }}>
                我的收藏
              </List.Item>
              <List.Item prefix={<HeartOutline />} onClick={() => { }}>
                我的点赞
              </List.Item>
              <List.Item prefix={<HistogramOutline />} onClick={() => { }}>
                我的评论
              </List.Item>
              <List.Item prefix={<FillinOutline />} onClick={() => { }}>
                我的游记
              </List.Item>
              <List.Item prefix={<UnlockOutline />} onClick={() => router('/changepass?password=' + userInfo.password)}>
                修改密码
              </List.Item>
            </div>
          }
          <List.Item prefix={<AppstoreOutline />} onClick={() => { }}>
            公告
          </List.Item>
          <List.Item prefix={<ChatAddOutline />} onClick={() => { }}>
            联系我们
          </List.Item>
          <List.Item prefix={<CheckShieldOutline />} extra={cache + 'M'} onClick={clsCache}>
            清除缓存
          </List.Item>
          <List.Item prefix={<SetOutline />} onClick={() => { }}>
            设置
          </List.Item>
        </List>
      </div>

      <Mask visible={visible} className='allmask'>
        <div className='mask'>
          <div className='mask-box'>
            <Space direction='vertical' block>
              <ProgressBar
                percent={percent}
                text
                style={{
                  '--track-width': '8px',
                }}
              />
            </Space>
          </div>
        </div>
      </Mask>

      {
        userInfo &&
        <div className='logout' style={{ margin: '15px' }}>
          <Button block color='danger' onClick={logout}>退出登录</Button>
        </div>
      }
    </div>
  )
}

export default Mine
